//数据渲染
function showData(pageNum) {
  $('tbody').html('')
  let showData = resultData.slice((pageNum - 1) * eachNum, pageNum * eachNum)
  showData.forEach(item => {
    $('tbody').append(`
      <tr>
        <th><input type="checkbox" class="checks" onclick='ischecks()'></th>
        <td>${item.tsbh}</td>
        <td>${item.jyts}</td>
        <td>${item.zz}</td>
        <td>${item.cbs}</td>
        <td>${item.lb}</td>
        <td>${item.jj}</td>
        <td>${item.szsk}</td>
        <td>${item.rkrq}</td>
        <td>${item.tszt}</td>
        <td>
          <span class="change" data-toggle="modal"
          data-target="#myModal" onclick='xiugaijy(this)'>编辑</span>
          <span>|</span>
          <span class='del' data-toggle="modal"
          data-target="#myModal" onclick='sureDel(this)'>删除</span>
        </td>
      </tr>
    `)
  })
}
//新增借阅弹框
function xinzengjy() {
  $('.modal-content').html(`
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">新增入库</h4>
    </div>
    <div class="modal-body">
      <div class="xzsr"><span>图书编号</span><input type="text"></div>
      <div class="xzsr"><span>图书名称</span><input type="text"></div>
      <div class="xzsr"><span>作者</span><input type="text" value=></div>
      <div class="xzsr"><span>出版社</span><input type="text" value=></div>
      <div class="xzsr"><span>类别</span>
        <select name="" id="lbselect" value=>
          <option value="" selected>综合性图书</option>
          <option value="">文学类图书</option>
          <option value="">教育类图书</option>
        </select>
      </div>
      <div class="xzsr"><span>简介</span><textarea name="" id="" cols="50" rows="4"></textarea></div>
      <div class="xzsr"><span>所在书库</span>
        <select name="" id="skselect" value=>
          <option value="">一号</option>
          <option value="">二号</option>
          <option value="">三号</option>
        </select>
      </div>
      <div class="xzsr rqxz"><span>入库日期</span><input type="date"></div>
      <div class="xzsr"><span>图书状态</span>
        <select name="" id="ztselect">
          <option value="" selected>在馆</option>
          <option value="">离馆</option>
        </select>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addData()">确定</button>
    </div>`)
}
//新增借阅数据
function addData() {
  let add = new AddJyData()
  bookData.unshift(add)
  resultData = bookData
  goPage(nowPageNum)
  let allData = JSON.stringify(bookData)
  sessionStorage.setItem('initialData', allData)
}
//数据构造
function AddJyData() {
  this.tsbh = $('.xzsr').eq(0).children().last().val()
  this.jyts = $('.xzsr').eq(1).children().last().val()
  this.zz = $('.xzsr').eq(2).children().last().val()
  this.cbs = $('.xzsr').eq(3).children().last().val()
  this.lb = $('#lbselect option:selected').text()
  this.jj = $('.xzsr').eq(5).children().last().val()
  this.szsk = $('#skselect option:selected').text()
  this.rkrq = $('.xzsr').eq(7).children().last().val()
  this.tszt = $('#ztselect option:selected').text()
}
//编辑借阅弹框${objval.eq(8).text()}
function xiugaijy(obj) {
  let objval = $(obj).parent().siblings('td')
  $('.modal-content').html(`
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">修改入库</h4>
    </div>
    <div class="modal-body">
      <div class="xzsr"><span>图书编号</span><input disabled="disabled" type="text" value=${objval.eq(0).text()}></div>
      <div class="xzsr"><span>图书名称</span><input type="text" value=${objval.eq(1).text()}></div>
      <div class="xzsr"><span>作者</span><input type="text" value=${objval.eq(2).text()}></div>
      <div class="xzsr"><span>出版社</span><input type="text" value=${objval.eq(3).text()}></div>
      <div class="xzsr"><span>类别</span>
        <select name="" id="lbselect">
          <option value="" style="display:none" selected>${objval.eq(4).text()}</option>
          <option value="">综合性图书</option>
          <option value="">文学类图书</option>
          <option value="">教育类图书</option>
        </select>
      </div>
      <div class="xzsr"><span>简介</span><textarea name="" id="" cols="50" rows="4" value=${objval.eq(5).text()}></textarea></div>
      <div class="xzsr"><span>所在书库</span>
        <select name="" id="skselect" value=>
          <option value="" style="display:none" selected>${objval.eq(6).text()}</option>
          <option value="">001</option>
          <option value="">002</option>
          <option value="">003</option>
        </select>
      </div>
      <div class="xzsr rqxz"><span>入库日期</span><input type="date" value=${objval.eq(7).text()}></div>
      <div class="xzsr"><span>图书状态</span>
        <select name="" id="ztselect">
          <option value="" style="display:none" selected>${objval.eq(8).text()}</option>
          <option value="">在馆</option>
          <option value="">离馆</option>
        </select>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="changeData()">确定</button>
    </div>`)
}
//修改入库数据
function changeData() {
  for (let i = 0; i < bookData.length; i++) {
    if (bookData[i].tsbh == $('.xzsr').eq(0).children().last().val()) {
      bookData[i].tsbh = $('.xzsr').eq(0).children().last().val()
      bookData[i].jyts = $('.xzsr').eq(1).children().last().val()
      bookData[i].zz = $('.xzsr').eq(2).children().last().val()
      bookData[i].cbs = $('.xzsr').eq(3).children().last().val()
      bookData[i].lb = $('#lbselect option:selected').text()
      bookData[i].jj = $('.xzsr').eq(5).children().last().val()
      bookData[i].szsk = $('#skselect option:selected').text()
      bookData[i].rkrq = $('.xzsr').eq(7).children().last().val()
      bookData[i].tszt = $('#ztselect option:selected').text()
    }
  }
  goPage(nowPageNum)
  let allData = JSON.stringify(bookData)
  sessionStorage.setItem('initialData', allData)
}
//确认删除弹框
function sureDel(obj) {
  let objval = $(obj).parent().siblings('td')
  let deljykh = objval.first().text()
  $('.modal-content').html(`
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">删除入库</h4>
    </div>
    <div class="modal-body">
      <p>确认删除图书编号为：${deljykh}&nbsp的入库数据吗？</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="shanchujy(${deljykh})">确定</button>
    </div>`)
}
//删除入库
function shanchujy(deldata) {
  for (let i = 0; i < bookData.length; i++) {
    if (bookData[i].jykh == deldata) {
      bookData.splice(i, 1)
    }
  }
  for (let j = 0; j < resultData.length; j++) {
    if (resultData[j].jykh == deldata) {
      resultData.splice(j, 1)
    }
  }
  if (maxPage > Math.ceil(resultData.length / eachNum)) {
    prePage()
  }
  maxPage = Math.ceil(resultData.length / eachNum)
  showPage(maxPage)
  goPage(nowPageNum)
  let allData = JSON.stringify(bookData)
  sessionStorage.setItem('initialData', allData)
}
//勾选框选中时改变批量删除按钮样式
function ischecks() {
  if ($('.checks').is(':checked')) {
    $('#piliangdel').css({
      'color': 'black'
    })
    $('#piliangdel').removeAttr('disabled')
  } else {
    $('#piliangdel').css(
      'color', 'rgb(209, 209, 209)'
    )
    $('#piliangdel').attr('disabled', "false")
  }
}
//批量删除确认弹框
function surePlDel() {
  $('.modal-content').html(`
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">删除入库</h4>
    </div>
    <div class="modal-body">
      <p>确认删除选中的入库数据吗？</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="plshanchu()">确定</button>
    </div>`)
}
//批量删除
function plshanchu() {
  $('.checks').not('#biaotou').each(function () {
    if ($(this).is(':checked')) {
      let deldata = $(this).parent().next().text()
      for (let i = 0; i < bookData.length; i++) {
        if (bookData[i].tsbh == deldata) {
          bookData.splice(i, 1)
        }
      }
      for (let j = 0; j < resultData.length; j++) {
        if (resultData[j].tsbh == deldata) {
          resultData.splice(j, 1)
        }
      }
    }
  })
  if (maxPage > Math.ceil(resultData.length / eachNum)) {
    prePage()
  }
  maxPage = Math.ceil(resultData.length / eachNum)
  showPage(maxPage)
  goPage(nowPageNum)
  let allData = JSON.stringify(bookData)
  sessionStorage.setItem('initialData', allData)
}
//查询数据
function enquiryData() {
  if ($('#entext').val() != '') {
    resultData = []
    for (let i = 0; i < bookData.length; i++) {
      if (bookData[i].tsbh.match($('#entext').val()) ||
        bookData[i].jyts.match($('#entext').val()) ||
        bookData[i].zz.match($('#entext').val()) ||
        bookData[i].cbs.match($('#entext').val())) {
        resultData.push(bookData[i])
      }
    }
  } else {
    resultData = bookData
  }
  nowPageNum = 1
  maxPage = Math.ceil(resultData.length / eachNum)
  showPage(maxPage)
  goPage(nowPageNum)
}